<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2021-11-10 10:04:58
 * @LastEditors: younghxp
 * @LastEditTime: 2021-12-06 17:00:38
-->
<template>
  <div class="orderDetail">
    <div class="orderInfo">
      <p class="title">订单信息</p>
      <div class="infoBox">
        <div class="iconBox">
          <i
            v-if="
              status === 'ORGAUDITING' ||
              status === 'SENDING' ||
              status === 'JCAUDITING'
            "
            :class="'icon iconfont icondengdai ' + status"
          ></i>
          <i
            v-if="status === 'SENT'"
            :class="'icon iconfont iconyiqueren ' + status"
          ></i>
          <i
            v-if="
              status === 'CANCEL' ||
              status === 'AUDITFAILED' ||
              status === 'OVERDUE'
            "
            :class="'icon iconfont iconshibai1 ' + status"
          ></i>
        </div>
        <div class="status">
          <p :class="'statusText ' + status">
            {{ statusText }}
            <el-link
              type="primary"
              @click="seeAuditProcess"
              v-if="status !== 'CANCEL'"
              style="margin-left: 18px"
              >查看审核流程</el-link
            >
            <!-- 保证金数据 -->
            <span
              class="bzjTips"
              v-if="
                insuranceDetail.isCreate === 'NOT_CREATED' &&
                (status === 'SENT' || status === 'OVERDUE') &&
                userType === 'JC' &&
                insuranceDetail.isRenew === '0'
              "
            >
              项目已存在保证金缴存数据，投保订单生成的保证金缴存数据未同步
            </span>
            <span
              class="bzjTips"
              v-if="
                insuranceDetail.isCreate === 'CREATED' &&
                (status === 'SENT' || status === 'OVERDUE') &&
                userType === 'JC' &&
                insuranceDetail.isRenew === '0'
              "
            >
              投保订单生成的保证金缴存数据已同步至保证金功能
              <el-link type="primary" @click="toBzj" style="margin-left: 18px"
                >查看详情</el-link
              >
            </span>
          </p>
          <p :class="'statusDesc ' + status" v-if="status === 'AUDITFAILED'">
            <span>驳回方：{{ insuranceDetail.rejectUserType }}</span>
            <span style="margin-left: 18px"
              >驳回原因：{{ insuranceDetail.rejecteReason }}</span
            >
          </p>
          <p
            class="statusDesc"
            v-if="
              status === 'SENDING' &&
              ($store.state.userType === 'PROJECT_ADMINISTRATOR' ||
                $store.state.userType === 'LABOR_ADMINISTRATOR' ||
                $store.state.userType === 'FENBAO_MANAGER')
            "
          >
            审核已通过，保险工作人员将在1-3个工作日内联系您，请保持电话畅通。
          </p>
          <p class="orderIndex orderIndexFirst">
            订单号：<span>{{ insuranceDetail.insureId }}</span>
          </p>
          <p class="orderIndex">
            提交时间：<span>{{ insuranceDetail.createTime | filterTime }}</span>
          </p>
          <p
            class="orderIndex"
            v-if="status === 'SENT' || status === 'OVERDUE'"
          >
            出函时间：<span>{{ insuranceDetail.sentTime | filterTime }}</span>
          </p>
        </div>
        <div class="btnBox">
          <el-button
            type="primary"
            v-if="status === 'ORGAUDITING' && userType === 'XM'"
            @click="toEdit"
            class="commonBtn confirmBtn"
          >
            <span>修改资料</span>
          </el-button>
          <el-button
            type="primary"
            v-if="
              status === 'ORGAUDITING' &&
              userType === 'BX' &&
              insuranceDetail.canChecked == '1'
            "
            @click="showDialog('JCAUDITING')"
            class="commonBtn confirmBtn"
          >
            <span>审核通过</span>
          </el-button>
          <el-button
            type="primary"
            v-if="
              status === 'JCAUDITING' &&
              userType === 'JC' &&
              insuranceDetail.canChecked == '1'
            "
            @click="showDialog('SENDING')"
            class="commonBtn confirmBtn"
          >
            <span>审核通过</span>
          </el-button>
          <el-button
            type="primary"
            v-if="
              (status === 'ORGAUDITING' &&
                userType === 'BX' &&
                insuranceDetail.canChecked == '1') ||
              (status === 'JCAUDITING' &&
                userType === 'JC' &&
                insuranceDetail.canChecked == '1')
            "
            @click="showDialog('AUDITFAILED')"
            class="commonBtn cancleBtn"
          >
            <span>驳回</span>
          </el-button>
          <el-button
            type="primary"
            v-if="status === 'AUDITFAILED' && userType === 'XM'"
            @click="toEdit"
            class="commonBtn confirmBtn"
          >
            <span>修改订单，再次提交</span>
          </el-button>
          <el-popover
            v-if="
              (status === 'ORGAUDITING' || status === 'SENDING') &&
              userType === 'XM'
            "
            placement="top"
            width="200"
            ref="popover"
          >
            <p style="line-height: 40px">
              <i class="el-icon-info" style="color: rgb(255, 153, 0)"></i>
              是否确认取消订单？
            </p>
            <div style="text-align: right; margin: 0">
              <el-button
                size="mini"
                type="text"
                @click="$refs.popover.doClose()"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="cancleOrder"
                >确定</el-button
              >
            </div>
            <el-button
              slot="reference"
              type="primary"
              class="commonBtn cancleBtn"
            >
              <span>取消订单</span>
            </el-button>
          </el-popover>
          <el-button
            type="primary"
            v-if="status === 'SENDING' && userType === 'BX'"
            @click="showUploadDialog"
            class="commonBtn confirmBtn"
          >
            <span>上传电子保函</span>
          </el-button>
          <el-button
            type="primary"
            v-if="status === 'SENT' || status === 'OVERDUE'"
            @click="showAttach"
            class="commonBtn confirmBtn"
          >
            <span>电子保函</span>
          </el-button>
          <el-button
            type="primary"
            v-if="
              (status === 'SENT' || status === 'OVERDUE') && userType === 'XM'
            "
            @click="renewInsurance"
            class="commonBtn cancleBtn"
          >
            <span>续保</span>
          </el-button>
          <el-button
            type="primary"
            v-if="
              (status === 'SENT' || status === 'OVERDUE') && userType === 'JC'
            "
            @click="toClaim"
            class="commonBtn confirmBtn"
          >
            <span>申请理赔</span>
          </el-button>
        </div>
      </div>
    </div>
    <div class="baseInfo">
      <p class="title">基本信息</p>
      <div class="infoBox">
        <h3 class="secondaryTitle secondaryTitleTheme">投保项目</h3>
        <el-row style="margin-top: 10px">
          <el-col :span="24">
            <p class="orderIndex">
              投保项目名称：<span>{{ insuranceDetail.projectName }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <p class="orderIndex">
              保函类型：<span>{{ insuranceDetail.insureTypeDesc }}</span>
            </p>
          </el-col>
          <el-col :span="12">
            <p class="orderIndex">
              承保机构：<span>{{ insuranceDetail.insureOrgDesc }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <p class="orderIndex">
              担保金额：<span
                >{{ insuranceDetail.insureAmount | splitNumber }}元</span
              >
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <p class="orderIndex">
              保函有效期：<span>{{
                insuranceDetail.startDate + '-' + insuranceDetail.lastDate
              }}</span>
            </p>
          </el-col>
          <el-col :span="12">
            <p class="orderIndex">
              项目地址：<span>{{ insuranceDetail.projectAddress }}</span>
            </p>
          </el-col>
        </el-row>
      </div>
      <div class="infoBox">
        <h3 class="secondaryTitle secondaryTitleTheme">
          投保方<span>&nbsp;（即项目施工方）</span>
        </h3>
        <el-row style="margin-top: 10px">
          <el-col :span="24">
            <p class="orderIndex">
              投保企业名称：<span>{{ insuranceDetail.companyName }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <p class="orderIndex">
              统一社会信用代码：<span>{{ insuranceDetail.uscc }}</span>
            </p>
          </el-col>
          <el-col :span="12">
            <p class="orderIndex">
              施工资质等级：<span>{{ insuranceDetail.qualificationDesc }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <p class="orderIndex">
              联系人姓名：<span>{{ insuranceDetail.linkName }}</span>
            </p>
          </el-col>
          <el-col :span="12">
            <p class="orderIndex">
              手机号码：<span>{{ insuranceDetail.linkTel }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <p class="orderIndex">
              保单收件人：<span>{{ insuranceDetail.insureAddressee }}</span>
            </p>
          </el-col>
          <el-col :span="12">
            <p class="orderIndex">
              收件人手机号：<span>{{ insuranceDetail.addresseeTel }}</span>
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <p class="orderIndex">
              保单收件地址：<span>{{ insuranceDetail.address }}</span>
            </p>
          </el-col>
        </el-row>
      </div>
      <div class="infoBox">
        <h3 class="secondaryTitle secondaryTitleTheme">受益人</h3>
        <el-row style="margin-top: 10px">
          <el-col :span="24">
            <p class="orderIndex">
              投保人依法招用的{{ insuranceDetail.projectName }}农民工
            </p>
          </el-col>
        </el-row>
      </div>
      <div class="infoBox">
        <h3 class="secondaryTitle secondaryTitleTheme">投保资料</h3>
        <table cellspacing="0" cellpadding="0" border="1" class="tableBox">
          <tbody>
            <tr>
              <td class="fisrtTd">
                <div class="titleBox">
                  <div
                    class="tabTitle"
                    @click="changeIndex(item)"
                    v-for="item in fileOptions"
                    :key="item.id"
                  >
                    <div
                      :class="
                        currentIndex === item.id
                          ? 'textBox textBoxCur'
                          : 'textBox'
                      "
                    >
                      <p style="text-align: center">
                        <span class="nameText">{{ item.name }}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="fileBox">
                  <div
                    class="fileInfo"
                    v-for="item in fileOptions"
                    :key="item.id"
                    v-show="currentIndex === item.id"
                  >
                    <p style="margin-bottom: 20px">{{ item.name }}</p>
                    <div
                      v-for="(cvalue, ckey, cindex) in dataObject"
                      :key="cindex"
                    >
                      <uploadResult
                        style="margin-top: 20px; margin-left: 0 !important"
                        :resultList="cvalue"
                        @callBackResult="getFileLicense"
                        v-if="ckey == item.id"
                        :id="item.id"
                        :mark="'enclosure'"
                        :showDelete="false"
                      />
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 查看电子保函弹窗 -->
        <contractEnclosureDialog
          v-if="uploadGuarantee"
          dialogTitle="电子保函附件"
          :tableData="guaranteeList"
          @closeDialog="uploadGuarantee = false"
        ></contractEnclosureDialog>
        <!-- 审核/驳回弹窗 -->
        <el-dialog
          :title="dialogTitle"
          :visible="dialogVisible"
          @close="closeDialog"
          custom-class="dialog-minwidth"
          width="800px"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :modal-append-to-body="false"
        >
          <el-form
            v-if="ruleForm.status === 'AUDITFAILED'"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="驳回原因：" prop="rejecteReason">
              <el-input
                type="textarea"
                :rows="3"
                :maxlength="300"
                placeholder="请输入备注"
                show-word-limit
                v-model="ruleForm.rejecteReason"
              ></el-input>
            </el-form-item>
          </el-form>
          <p v-else>确认通过审核？</p>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="closeDialog" class="cancel"
              >取 消</el-button
            >
            <el-button
              type="primary"
              v-sdc
              class="save"
              @click.native="updateStatus('ruleForm')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 上传电子保函弹窗 -->
        <el-dialog
          title="上传保函"
          :visible="uploadVisible"
          @close="closeUploadDialog"
          custom-class="dialog-minwidth"
          width="800px"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :modal-append-to-body="false"
        >
          <el-form
            :model="uploadRuleForm"
            :rules="uploadRules"
            ref="uploadRuleForm"
            label-width="120px"
            class="demo-ruleForm"
          >
            <!-- <el-form-item label="担保机构：" prop="insureOrg">
                            <el-select v-model="uploadRuleForm.insureOrg" filterable placeholder="请选择" clearable :popper-append-to-body="false">
                                <el-option v-for="item in guaranteeInstitutionOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
                            </el-select>
                        </el-form-item> -->
            <el-form-item label="保函：" prop="files">
              <uploadAnnex
                @getFileList="getFileListGuarantee"
                :limitationFactor="limitationFactorGuarantee"
                @getFile="getFileGuarantee"
              />
              <uploadResult
                style="margin-top: 20px"
                :resultList="upLoadFileGuarantee"
                @callBackResult="getFileGuarantee"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="closeUploadDialog" class="cancel"
              >取 消</el-button
            >
            <el-button
              type="primary"
              v-sdc
              class="save"
              @click.native="uploadGuaranteeAttach('uploadRuleForm')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 查看审核流程 -->
        <audit-process
          @closeDialog="closeDialogAuditProcess"
          v-if="hisAuditProcess"
          :id="id"
        ></audit-process>
      </div>
    </div>
  </div>
</template>

<script>
import auditProcess from './auditProcess.vue'

export default {
  name: 'insuranceDetail',
  props: {
    status: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
  },
  components: {
    auditProcess,
  },
  data() {
    var checkUpLoadFile = (rule, value, callback) => {
      if (!this.upLoadFileGuarantee.length) {
        return callback(new Error('附件不能为空'))
      } else {
        callback()
      }
    }
    return {
      userType: '',
      insuranceDetail: {},
      upLoadFileLicense: [], //工商营业执照
      upLoadFileLevel: [], //资质等级证书
      upLoadFileContract: [], //项目施工合同
      upLoadFileApplication: [], //缴存申请表
      upLoadFileHeader: [], //企业发票抬头（专票）
      upLoadFileBidding: [], //项目招标文件
      upLoadFileNotice: [], //项目中标通知书
      upLoadFileOrder: [], //开工令
      upLoadFileOther: [], //其他资料
      fileOptions: [],
      currentIndex: 0,
      uploadGuarantee: false, //电子保函弹窗
      guaranteeList: [], //电子保函附件
      dialogVisible: false, //审核/驳回弹窗
      dialogTitle: '',
      ruleForm: {
        id: this.id,
        status: '',
        rejecteReason: '',
      },
      rules: {
        rejecteReason: {
          required: true,
          message: '请输入驳回原因',
          trigger: 'blur',
        },
      },
      uploadVisible: false, //审核/驳回弹窗
      guaranteeInstitutionOptions: [],
      uploadRuleForm: {
        id: this.id,
        insureOrg: '',
        files: [],
      },
      uploadRules: {
        insureOrg: {
          required: true,
          message: '请选择担保机构',
          trigger: 'change',
        },
        files: {
          required: true,
          validator: checkUpLoadFile,
          trigger: 'change',
        },
      },
      upLoadFileGuarantee: [], //保函附件
      oldSrcListGuarantee: [],
      srcListGuarantee: [],
      limitationFactorGuarantee: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 5, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFive', //自定义上传格式校验类型
        fileId: 'guarantee', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'guaranteeForm', //自定义id解决一个页面包含多个上传附件
        messagetip: '要求格式为png，jpg，jpeg，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上传保函附件，附件格式支持png，jpg，jpeg，pdf，最多上传5个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      hisAuditProcess: false, //审核流程弹框
      dataObject: {},
    }
  },
  computed: {
    statusText() {
      let text
      switch (this.status) {
        case 'ORGAUDITING':
          text = '待承保机构审核'
          break
        case 'CANCEL':
          text = '订单已取消'
          break
        case 'AUDITFAILED':
          text = '审核不通过'
          break
        case 'SENDING':
          text = '待出函'
          break
        case 'SENT':
          text = '已出函'
          break
        case 'OVERDUE':
          text = '担保过期'
          break
        case 'JCAUDITING':
          text = '待监管部门审核'
          break
        default:
          break
      }
      return text
    },
  },
  filterField: {
    filterTime(time) {
      if (time) {
        const dateArr = time.split(' ')[0].split('-')
        return (
          dateArr[0] +
          '年' +
          dateArr[1] +
          '月' +
          dateArr[2] +
          '日' +
          ' ' +
          time.split(' ')[1]
        )
      } else {
        return '--'
      }
    },
  },
  async mounted() {
    switch (this.$store.state.userType) {
      case 'MONITOR': //监察
        this.userType = 'JC'
        break
      // case 'INSURANCE_SALESMAN'://保险业务员
      //     this.userType = 'BX'
      //     break;
      case 'PROJECT_ADMINISTRATOR' || 'LABOR_ADMINISTRATOR' || 'FENBAO_MANAGER': //项目
        this.userType = 'XM'
        break
      default:
        break
    }
    await this.getUserType() //获取是否为保险业务员角色
    this.getInsuranceDetail(this.id)
  },
  methods: {
    getInsuranceDetail(id) {
      return this.axios({
        method: 'post',
        url: 'api-d/depositinsinsure/expand/detail',
        data: {
          id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.insuranceDetail = response.data.result
            this.guaranteeList = this.insuranceDetail.insureFiles
            this.dataObject = this.insuranceDetail.fileList
            this.status = this.insuranceDetail.status
            this.$emit('changeStatus', this.status)
            this.getInsureEnclosure(this.insuranceDetail.id)
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 修改资料=>投保登记页面
    toEdit() {
      this.$emit('changeStep', '1')
      this.$emit('changeStatus', '')
      this.$emit('changeType', 'update')
    },
    // 续保=>投保登记页面
    renewInsurance() {
      this.$emit('changeStep', '1')
      this.$emit('changeStatus', '')
      this.$emit('changeType', 'renew')
    },
    // 展示电子保函弹窗
    showAttach() {
      this.uploadGuarantee = true
    },
    // 跳转申请理赔
    toClaim() {
      this.$router.push({
        path: '/home/newInsurance/addSettlementClaims',
        name: 'addSettlementClaims',
        query: {
          projectId: this.insuranceDetail.projectId,
          insureId: this.insuranceDetail.insureId,
          id: this.insuranceDetail.id,
          status: this.insuranceDetail.status,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/newInsurance/insuranceOrder',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 取消订单
    cancleOrder() {
      this.$refs.popover.doClose()
      return this.axios({
        method: 'post',
        url: 'api-d/depositinsinsure/expand/cancel',
        data: {
          id: this.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message.success(response.data.msg)
            this.$emit('changeStep', '1')
            this.$emit('changeStatus', 'CANCEL')
            this.getInsuranceDetail(this.id)
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 切换附件
    changeIndex(item) {
      this.currentIndex = item.id
    },
    // 审核通过/驳回弹窗操作
    showDialog(status) {
      this.ruleForm.status = status
      if (status === 'SENDING' || status === 'JCAUDITING') {
        this.dialogTitle = '审核确认'
      } else {
        this.dialogTitle = '驳回'
      }
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      if (this.ruleForm.status === 'AUDITFAILED') {
        this.$refs.ruleForm.resetFields()
      }
    },
    updateStatus(formName) {
      if (this.ruleForm.status === 'AUDITFAILED') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.submitStatus()
          } else {
            this.$message.error('请按照提示规则输入内容!')
            return false
          }
        })
      } else {
        this.submitStatus()
      }
    },
    submitStatus() {
      let data = {
        id: this.id,
        status: this.ruleForm.status === 'AUDITFAILED' ? 'NO' : 'YES',
      }
      if (this.ruleForm.status === 'AUDITFAILED') {
        Object.assign(data, { rejecteReason: this.ruleForm.rejecteReason })
      }
      return this.axios({
        method: 'post',
        url: 'api-d/depositinsinsure/expand/audit',
        data,
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message.success('操作成功')
            if (this.ruleForm.status === 'SENDING') {
              this.$emit('changeStatus', 'SENDING')
            } else if (this.ruleForm.status === 'JCAUDITING') {
              this.$emit('changeStatus', 'JCAUDITING')
            } else {
              this.$emit('changeStatus', 'AUDITFAILED')
            }
            this.getInsuranceDetail(this.id)
          } else {
            this.$message.error(response.data.errorMsg)
          }
          this.dialogVisible = false
        })
        .catch((error) => {
          this.dialogVisible = false
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 上传电子保函弹窗操作
    showUploadDialog() {
      this.uploadVisible = true
      this.getGuaranteeInstitutionOptions()
    },
    closeUploadDialog() {
      this.uploadVisible = false
      this.upLoadFileGuarantee = []
      this.$refs.uploadRuleForm.resetFields()
    },
    uploadGuaranteeAttach(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          return this.axios({
            method: 'post',
            url: 'api-d/depositinsinsure/expand/insuresend',
            data: {
              id: this.id,
              // insureOrg: this.uploadRuleForm.insureOrg,
              files: JSON.stringify(this.upLoadFileGuarantee),
            },
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.$message.success('操作成功')
                this.$emit('changeStatus', 'SENT')
                this.getInsuranceDetail(this.id)
              } else {
                this.$message.error(response.data.errorMsg)
              }
              this.uploadVisible = false
            })
            .catch((error) => {
              this.uploadVisible = false
              if (error.response) {
                this.$message.error(error.response.data)
              }
            })
        } else {
          this.$message.error('请按照提示规则输入内容!')
          return false
        }
      })
    },
    // 担保机构下拉
    getGuaranteeInstitutionOptions() {
      this.axios({
        method: 'post',
        url: 'api-d/depositinsinsure/expand/insureorg',
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.guaranteeInstitutionOptions = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 保函附件上传
    getFileListGuarantee(val) {
      this.oldSrcListGuarantee.push(val)
      this.srcListGuarantee.push(val)
    },
    getFileGuarantee(val) {
      this.upLoadFileGuarantee = val
      this.$refs.uploadRuleForm.validateField('files')
    },
    // 是否为保险业务员角色
    getUserType() {
      return this.axios({
        method: 'get',
        url: 'api-u/users/current',
      })
        .then((response) => {
          if (
            !response.data.hasError &&
            response.data.sysRoles &&
            response.data.sysRoles.length
          ) {
            response.data.sysRoles.forEach((v) => {
              if (v.code === 'INSURANCE_SALESMAN') {
                this.userType = 'BX'
              }
            })
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 审核流程弹框
    seeAuditProcess() {
      this.hisAuditProcess = true
    },
    closeDialogAuditProcess() {
      this.hisAuditProcess = false
    },
    //保证金详情
    toBzj() {
      this.$router.push({
        path: '/home/cashDeposit/cashDepositListJC',
        name: 'cashDepositListJC',
        query: {
          projectName: this.insuranceDetail.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositListJC',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 获取投保附件
    getInsureEnclosure(id) {
      this.axios({
        method: 'post',
        url: 'api-d/depositinsinsure/expand/getInsureOrgFile',
        data: {
          insureId: id,
          insureOrgId: this.insuranceDetail.insureOrg,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.fileOptions = response.data.result
            this.currentIndex = this.fileOptions[0].id
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
  },
}
</script>

<style lang="less" scoped>
@ORGAUDITING: #ffa449; //待审核
@CANCEL: #3e5265; //已取消
@AUDITFAILED: #e31c12; //审核不通过
@SENDING: #3189ea; //待出函
@SENT: #06ac15; //已出函
// @OVERDUE:'#3E5265';//担保过期
.orderDetail {
  width: 940px;
  height: 100%;
  margin-top: 28px;
  .orderInfo {
    width: 940px;
    border: 1px solid #dcdfe6;
    position: relative;
    .title {
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      color: #999999;
      font-weight: 400;
      background: #f5f7fa;
      padding-left: 16px;
      border-bottom: 1px solid #dcdfe6;
    }
    .infoBox {
      padding: 24px 16px;
      padding-bottom: 20px;
      .iconBox {
        display: inline-block;
        vertical-align: top;
        width: 72px;
        text-align: center;
        .iconfont {
          font-size: 36px;
        }
      }
      .status {
        display: inline-block;
        .statusText {
          font-size: 20px;
          font-weight: 700;
          margin-top: 6px;
          .bzjTips {
            color: #666;
            font-size: 14px;
            font-weight: normal;
            margin-left: 18px;
          }
        }
        .statusDesc {
          font-size: 14px;
          color: #333333;
          font-weight: 400;
          margin-top: 6px;
        }
        .orderIndex {
          font-size: 14px;
          line-height: 24px;
          color: #333333;
          font-weight: 400;
          span {
            color: #666666;
          }
        }
        .orderIndexFirst {
          margin-top: 10px;
        }
      }
      .btnBox {
        position: absolute;
        top: 44px;
        right: 66px;
        text-align: center;
        .commonBtn {
          width: 136px;
          height: 36px;
          display: block;
          margin-top: 16px;
        }
        .cancleBtn {
          border-color: #999 !important;
          background-color: #fff !important;
          color: #666 !important;
        }
        /deep/ .el-button {
          margin-left: 0 !important;
        }
      }
    }
  }
  .baseInfo {
    width: 940px;
    border: 1px solid #dcdfe6;
    margin-top: 10px;
    position: relative;
    .title {
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      color: #999999;
      font-weight: 400;
      background: #f5f7fa;
      padding-left: 16px;
    }
    .infoBox {
      border-top: 1px solid #dcdfe6;
      padding: 24px 38px;
      padding-bottom: 20px;
      h3 {
        // font-size: 18px;
        color: #333333;
        font-weight: 700;
        position: relative;
        left: 0;
        transform: translateX(-16px);
        // &::before {
        //     content: '';
        //     width: 4px;
        //     height: 18px;
        //     background: #265faa;
        //     position: absolute;
        //     top: 3px;
        //     left: -16px;
        // }
        span {
          font-size: 14px;
          color: #333333;
          font-weight: 700;
        }
      }
      .orderIndex {
        font-size: 14px;
        line-height: 32px;
        color: #333333;
        font-weight: 400;
        span {
          color: #666666;
        }
      }
      .tableBox {
        width: 100%;
        border-color: #dcdfe6;
        border-collapse: collapse;
        margin-top: 12px;
        margin-bottom: 4px;
        .fisrtTd {
          // height: 380px;
          padding: 0;
          font-size: 0;
          .titleBox {
            width: 160px;
            height: 100%;
            display: inline-block;
            vertical-align: top;
            border-bottom: none;
            padding: 0;
            margin-bottom: 0;
            .tabTitle {
              width: 100%;
              // height: calc(100% / 9);
              .textBox {
                width: 100%;
                border: 1px solid #dcdfe6;
                border-left: none;
                border-top: none;
                // display: table;
                height: 100%;
                position: relative;
                padding: 12px 12px;
                .nameText {
                  font-size: 14px;
                  color: #333333;
                  font-weight: 400;
                  vertical-align: middle;
                  // display: table-cell;
                  // text-indent: 15px;
                }
              }
              .textBoxCur {
                border-right: none;
                .nameText {
                  color: #48a6ff;
                }
              }
              &:nth-of-type(10) .textBox {
                border-bottom: none !important;
              }
            }
          }
          .fileBox {
            width: calc(100% - 160px);
            height: 100%;
            display: inline-block;
            padding: 24px;
            .fileInfo {
              position: relative;
              p {
                font-size: 16px;
                color: #333333;
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
  table,
  tr,
  td,
  th,
  thead,
  tbody {
    border: 1px solid #dcdfe6;
  }
}
.ORGAUDITING {
  color: @ORGAUDITING !important;
}
.CANCEL {
  color: @CANCEL !important;
}
.AUDITFAILED {
  color: @AUDITFAILED !important;
}
.SENDING {
  color: @SENDING !important;
}
.SENT {
  color: @SENT !important;
}
.OVERDUE {
  color: @CANCEL !important;
}
.JCAUDITING {
  color: @ORGAUDITING !important;
}
</style>
